<template>
	<view>
		<TabMenu :menus="tabList" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab"></TabMenu>
		<!-- 内容 -->
		<view class="xiala">
			<!-- 内容信息 -->
			<template v-if="orders.length>0">
				<view class="ReOrder-group-item" v-for="(item,index) in orders" :key="item.id">
					<view class="itemHeader">
						<text class="order-no">订单号:{{item.orderNumber}}</text>
						<text class="order-status">待确认收货</text>
					</view>
					<view class="info_center">
						<view class="tupian">
							<img src="../../static/IMG6000.jpg" width="105" height="85" />
						</view>
						<view class="info_1">
							<view class="pro_name">
								<view>馆藏精品</view>
								<view>{{item.orderNumber}}</view>
							</view>
							<view class="seller">
								<text class="f_blue">{{item.sellUserName}}</text>
								<text class="seller_name">卖家</text>
							</view>
							<view class="invite_Code">
								<view @click="clipboardData(item.sellUserInvitationCode)">卖家邀请码：（点击复制）</view>
								<view class="Code_size">{{item.sellUserInvitationCode}}</view>
							</view>
							<view class="buyer">
								<text class="f_blue">{{item.buyUserName}}</text>
								<text class="buyer_name">买家</text>
							</view>
							<view class="invite_Code">
								<view @click="clipboardData(item.buyUserInvitationCode)">买家邀请码：（点击复制）</view>
								<view class="Code_size">{{item.buyUserInvitationCode}}</view>
							</view>
						</view>
						<view class="price f_red">￥{{item.price}}</view>
					</view>
					<view class="itemFooter">
						<view class="item1">
							<text class="yf_price">下单时间：{{item.createTime}}</text>
							<text class="sj_price">运费：<span class="f_red">￥{{item.shelvesExpenses}}</span></text>
						</view>
						<view class="item1">
							<text class="yf_price">更新时间：{{item.updateTime}}</text>
							<text class="sj_price">实付：<span
									class="f_red">￥{{(Number(item.price)+Number(item.shelvesExpenses)).toFixed(2)}}</span></text>
						</view>
					</view>
					<view class="Vbtn">
						<view class="btn_style" v-if="item.state==2 && item.buyStatus==1" @click="applyForListing()">申请上架</view>
						<view class="btn_style" v-if="item.buyStatus==1" @click="open(item.sellUserId)">对方信息</view>
						<view class="btn_style" v-if="item.state==2 && false" @click="takeDeliveryGoods(item.id)">申请提货</view>
						<view class="btn_style" v-if="item.state==1 && item.sellStatus==1" @click="updateOrderState(item.id, 2,index)">确认收款</view>
						<view class="btn_style" v-if="item.state==0 && item.buyStatus==1" @click="updateOrderState(item.id, 1,index)">确认付款</view>
						<view class="btn_style" v-if="item.state==1">已付款</view>
						<view class="btn_style" v-if="item.state==2">已收款</view>
						<view class="btn_style" v-if="item.state==3 && item.buyStatus==1">已上架</view>
					</view>
				</view>
			</template>
			<Nodata v-else></Nodata>
		</view>
		<!-- 从中间弹出弹窗展示对方信息 -->
		<uni-popup ref="popup" type="center" @change="change" :mask-click="false">
			<view class="popup">
				<uni-icons type="close" size="30" class="btn_close" @click="close()"></uni-icons>
				<view class="popop_header">
					<view class="header_title" @click="popupClick(0)">WX</view>
					<view class="header_title" @click="popupClick(1)">ZFB</view>
					<view class="header_title" @click="popupClick(2)">YHK</view>
				</view>
				<view class="popup_content">
					<view v-show="popupIndex==0" class="poppup_item">
						<uni-file-picker class="item_img" readonly limit="1" :value="otherUserInfo.wxImg"
							return-type="object" :del-icon="false" :imageStyles="imageStyles"
							file-mediatype="image"></uni-file-picker>
						<text class="click_full">点击放大</text>
					</view> <!-- 支付宝图片 -->
					<view v-show="popupIndex==1" class="poppup_item">
						<uni-file-picker class="item_img" readonly limit="1" :value="otherUserInfo.zfbImg"
							return-type="object" :del-icon="false" :imageStyles="imageStyles"
							file-mediatype="image"></uni-file-picker>
							<text class="click_full">点击放大</text>
					</view> <!-- 微信宝图片 -->
					<view v-show="popupIndex==2" class="poppup_item">
						<view class="popup_yhk">
							<text>银行卡号:</text>
							<text class="value">{{otherUserInfo.khh}}</text>
							<text class="copy" @click="clipboardData(otherUserInfo.khh)">复制</text>
						</view>
						<view class="popup_yhk">
							<text>银行名称:</text>
							<text class="value">{{otherUserInfo.yhk}}</text>
							<text class="copy" @click="clipboardData(otherUserInfo.yhk)">复制</text>
						</view>
					</view> <!-- 银行卡信息 -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getOderList,
		updateOrderStateByOrderId
	} from '@/request/api/order.js'
	import {
		getuserInfoById
	} from '@/request/api/userInfo.js'
	import config from '@/request/config.js'
	import Nodata from '@/components/Nodata.vue'
	import TabMenu from '@/components/TabMenu.vue'
	export default {
		components: {
			Nodata,
			TabMenu
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				otherUserInfo: {
					wxImg: [{
						url: 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF',
						extname: 'png',
						name: 'shuijiao.png'
					}],
					zfbImg: [{
						url: 'https://t7.baidu.com/it/u=993577982,1027868784&fm=193&f=GIF',
						extname: 'png',
						name: 'shuijiao.png'
					}],
					yhk: '1234567788',
					khh: '中国建设银行'
				},
				imageStyles: {
					width: 120,
					height: 120,
					display: "inline-block"
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				popupIndex: 0,
				orders: [{
					id: '', //主键自增id
					orderNumber: '', //订单编号
					shopId: '', //商品Id
					storeId: '', //店铺Id
					buyUserId: '', //买家id
					buyUserName: '', //买家名称
					buyUserInvitationCode: '', //买家邀请码
					buyUserPhone: '', //买家手机号码
					sellUserId: '', //卖家id
					sellUserName: '', //卖家名称
					sellUserInvitationCode: '', //卖家邀请码
					sellUserPhone: '', //卖家手机号码
					price: 0, //价格
					createTime: '', //创建时间
					updateTime: '', //更新时间
					shelvesExpenses: 0, //上架费用
					seal: '', //是否已封存，0:未封存，1:已经封存
					sealTime: '', //封存时间
					transition: '', //是否转场,0:未转场,1:已经转场
					transitionTarget: '', //转场目标
					productName: '', //商品名称
					productImg: '', //商品图片链接
					productPrice: '', //商品价格
					orangeOrdersId: '', //原始订单ID
					splitId: '', //是否是拆分订单，0:不是拆分订单,1:是拆分订单
					params: '', //扩展参数
					state: '', //0:待付款，1:待收款，2:待上架，3:待出售,4.已出售
					buyStatus: 0,
					sellStatus: 0
				}],
				tabCur: 0,
				tabList: [{
					title: '全部',
				}, {
					title: '待付款',
				}, {
					title: '待收款',
				}, {
					title: '待上架',
				}, {
					title: '已出售',
				}]
			};
		},
		methods: {
			change(e) {
				if (e.show) {

				}
			},
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				this.getOrders(this.tabCur)
			},
			async getOrders(state) {
				const res = await getOderList(state - 1)
				if (res.data) {
					this.orders = res.data
				}
			},
			//申请提货
			takeDeliveryGoods(id) {

			},
			updateOrderState(orderId, state, position) {
				updateOrderStateByOrderId(orderId, state).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: '操作成功'
						})
						this.orders[position].state = state
					}

				})
			},
			applyForListing() {
				uni.showToast({
					title: '申请成功'
				})
			},
			open(userId) {
				getuserInfoById(userId).then((res) => {
					if (res.data) {
						this.otherUserInfo.zfbImg[0].url = config.api()+'/'+res.data.zfbImg
						this.otherUserInfo.wxImg[0].url = config.api()+'/'+res.data.wxImg
						this.otherUserInfo.khh = res.data.bankOpeningName
						this.otherUserInfo.yhk = res.data.bankNumber
						this.popupIndex = 0
						this.$refs.popup.open()
					}
				})
			},
			close() {
				this.$refs.popup.close()
			},
			popupClick(index) {
				this.popupIndex = index
			},
			clipboardData(data) {
				uni.setClipboardData({
					data: data, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail(err) {
						uni.showToast({
							title: '复制失败'
						})
					}
				});
			}
		},
		onLoad() {
			this.orders = []
		}
	};
</script>

<style scoped>
	.f_red {
		color: #fc4141;
	}

	.f_blue {
		color: #2866f9;
	}

	.f_right {
		font-size: 14px;
		font-weight: 400;
		color: #999;
		line-height: 21px;
	}

	.ReOrder-group-item {
		padding: 14px 10px 0 10px;
		background-color: #fff;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
	}

	.ReOrder-group-item .itemHeader {
		align-items: center;
		justify-content: space-between;
		height: 42px;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: row;
	}

	.itemHeader .order-no {
		color: #999;
	}

	.itemHeader .order-status {
		color: #f1553b;
	}

	.itemHeader .order-no text {
		font-size: 12px;
		font-weight: 400;
		line-height: 23px;
	}



	.ReOrder-group-item .info_center {
		padding: 10px 0 0 0;
		border-bottom: 1px solid #eee;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.info_center .info_1 {
		width: 45%;
		justify-content: space-around;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
	}

	.info_center .info_1 .pro_name {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.info_center .info_1 .seller_name,
	.info_center .info_1 .buyer_name {
		display: inline-block;
		width: 48px;
		background-color: #ff4144;
		font-size: 13px;
		color: #fff;
		text-align: center;
		border-radius: 9px;
		margin-left: 10px;
		padding: 1px 0;
	}

	.info_center .info_1 .buyer_name {
		background-color: #288F1A;
	}

	.ReOrder-group-item .info_center .price {
		position: absolute;
		right: 5px;
		font-size: 13px;
		font-weight: 400;
		color: #fc4141;
		line-height: 20px;
	}

	.invite_Code {
		color: #999;
	}

	.Code_size {
		font-size: 16px;
	}

	.ReOrder-group-item .itemFooter {
		padding: 10px 0;
		display: flex;
		flex-direction: column;
	}

	.ReOrder-group-item .itemFooter .item1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.ReOrder-group-item .itemFooter .item1 text {
		font-size: 13px;
		font-weight: 400;
		color: #999;
		line-height: 21px;
	}

	.Vbtn {
		display: flex;
		flex-direction: row;
		justify-content: end;
		padding: 11px 0;
	}

	.Vbtn .btn_style {
		color: white;
		width: 80px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border-radius: 5px;
		background-color: #2866f9;
		margin-left: 15px;
	}

	.popup {
		background: white;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		border-radius: 5px;
	}

	.popup .popop_header {
		display: flex;
		flex-direction: row;
		padding-top: 30px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.popup .popop_header .header_title {
		background-color: #999;
		color: white;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 3px;
		padding-bottom: 3px;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 20px;
		text-align: center;
		font-size: 14px;
	}

	.popup .popup_content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 180px;
	}

	.popup .popup_content .poppup_item {
		display: flex;
		flex-direction: column;
	}

	.popup .popup_content .poppup_item .item_img {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.popup .popup_content .poppup_item .popup_yhk {
		display: flex;
		text-align: center;
		flex-direction: row;
		justify-content: center;
		margin-top: 8px;
	}
	.popup .popup_content .poppup_item .popup_yhk .value {
		margin-left: 10px;
		min-width: 40%;
		min-height: 20px;
		border: 1px solid gray;
		padding-left: 5px;
		text-align: left;
	}

	.btn_close {
		position: absolute;
		right: 2px;
		top: 5px;
	}

	.copy {
		background-color: gray;
		color: white;
		padding-left: 2px;
		padding-right: 2px;
		font-size: 10px;
		margin-left: 5px;
		border-radius: 20%;
	}
	.click_full{
		text-align: center;
		margin-top: 4px;
	}
</style>